<template>
  <div style="padding: 20px">
    <div style="display: flex; justify-content: end; align-items: center">
      <el-button type="primary" @click="dialogVisibleClick"
        >新增相关绑定+</el-button
      >
    </div>

    <el-descriptions
      title="商家展示相关绑定"
      v-for="(item, index) in bindingList"
      :key="index"
      border
      size="small"
    >
      <el-descriptions-item label="家具图">
        <img
          style="width: 100px; height: 100px"
          :src="item.furniture_image"
          alt=""
        />
      </el-descriptions-item>
      <el-descriptions-item label="设备码">
        <img style="width: 100px; height: 100px" :src="item.qrcode" alt="" />
      </el-descriptions-item>
      <el-descriptions-item label="家具翻转">{{
        item.furniture_overturn
      }}</el-descriptions-item>
      <el-descriptions-item label="家具位置(x-y)">{{
        item.furniture_position
      }}</el-descriptions-item>
      <el-descriptions-item label="绑定名">{{
        item.binding_name
      }}</el-descriptions-item>
      <el-descriptions-item label="绑定状态">
        <span v-if="item.binding_status == 0">未绑定</span>
        <span v-if="item.binding_status == 1">门设备</span>
        <span v-if="item.binding_status == 2">智能设备</span>
      </el-descriptions-item>
      <el-descriptions-item label="设备id">{{
        item.device_id
      }}</el-descriptions-item>
      <el-descriptions-item label="收费规则">
        <el-tag size="small" v-if="item.fee_rules == 0">开放</el-tag>
        <el-tag size="small" v-if="item.fee_rules == 1">秒</el-tag>
        <el-tag size="small" v-if="item.fee_rules == 2">分钟</el-tag>
        <el-tag size="small" v-if="item.fee_rules == 3">小时·</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="价格">{{ item.price }}</el-descriptions-item>
      <el-descriptions-item label="wifi名">{{
        item.wifi_name
      }}</el-descriptions-item>
      <el-descriptions-item label="wifi密码">{{
        item.wifi_password
      }}</el-descriptions-item>
      <el-descriptions-item label="设备检测">
        <el-button type="primary" @click="deviceDetection(item)"
          >设备检测</el-button
        >
      </el-descriptions-item>
      <el-descriptions-item label="锁测试数据">
        <el-tag @click="lockDeviceClick" size="small">锁测试数据</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="智能设备操作">
        <el-popconfirm
          confirm-button-text="上电"
          cancel-button-text="断电"
          title="选择智能设备操作"
          @confirm="confirmSmartDevices(item)"
          @cancel="cancelSmartDevices(item)"
        >
          <el-button slot="reference">智能设备操作</el-button>
        </el-popconfirm>
        <!-- 
        <el-tag @click="smartDevices" size="small">智能设备操作</el-tag> -->
      </el-descriptions-item>
    </el-descriptions>
    <el-card v-if="bindingList.length > 0"> 
      <div slot="header">检测日志</div>
      <div style="width: 20vw; height: 20vh; border: 1px solid #000">
        {{ log }}
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" width="60%" top="1vh">
      <div>
        <el-form :inline="true" :model="formEdit" class="demo-form-inline">
          <el-form-item label="绑定名">
            <el-input
              v-model="formEdit.binding_name"
              placeholder="绑定名"
            ></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input
              v-model.number="formEdit.price"
              placeholder="价格"
            ></el-input>
          </el-form-item>
          <el-form-item label="收费规则(0=开放，1=秒，2=分钟，2=小时)">
            <el-input
              v-model.number="formEdit.fee_rules"
              placeholder="收费规则"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="font-size: 3vh; font-weight: 500; margin: 0.3vh 0 0 0.3vh">
          家具
        </div>
        <div class="container_grid">
          <div
            class="container_grid_item"
            v-for="(item, index) in furnitureList"
            :key="index"
            :offset="index > 0 ? 2 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
              <el-image
                style="width: 100px; height: 100px"
                :src="item.furniture_image"
                :preview-src-list="srcList"
              >
              </el-image>
              <!-- <img
            style="width: 100%; height: 10vh"
            :src="item.furniture_image"
            class="image"
          /> -->
              <div style="padding: 14px">
                <div style="display: flex; justify-content: space-between">
                  <span>{{ item.furniture_name }}</span>
                  <!-- <span>尺寸：{{ item.size }}</span> -->
                </div>
              </div>

              <el-checkbox
                @change="furnitureChange(item)"
                style="padding: 10px"
                v-model="item.flag"
                >选中设备</el-checkbox
              >
            </el-card>
          </div>
        </div>
        <div style="font-size: 3vh; font-weight: 500; margin: 0.3vh 0 0 0.3vh">
          锁设备
        </div>
        <div class="container_grid">
          <div
            class="container_grid_item"
            v-for="(item, index) in LockDevice"
            :key="index"
            :offset="index > 0 ? 2 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
              <!-- <img
            style="width: 100%; height: 10vh"
            :src="furniture_image"
            class="image"
          /> -->
              <div style="padding: 14px">
                <div style="display: flex; justify-content: space-between">
                  <span>网关id：{{ item.gateway_id }}</span>
                </div>
                <div style="display: flex; justify-content: space-between">
                  <span>锁组id{{ item.lock_group_id }}</span>
                </div>
                <div style="display: flex; justify-content: space-between">
                  <span>锁id：{{ item.lock_id }}</span>
                </div>
              </div>
              <el-checkbox
                @change="LockDeviceChange(item)"
                style="padding: 10px"
                v-model="item.flag"
                >选中设备</el-checkbox
              >
            </el-card>
          </div>
        </div>
        <div style="font-size: 3vh; font-weight: 500; margin: 0.3vh 0 0 0.3vh">
          智能设备
        </div>
        <div class="container_grid">
          <div
            class="container_grid_item"
            v-for="(item, index) in smartDevices"
            :key="index"
            :offset="index > 0 ? 2 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
              <!-- <img
            style="width: 100%; height: 10vh"
            :src="furniture_image"
            class="image"
          /> -->
              <div style="padding: 14px">
                <div style="display: flex; justify-content: space-between">
                  <span>设备名{{ item.device_name }}</span>
                </div>
                <div style="display: flex; justify-content: space-between">
                  <span>设备id{{ item.device_id }}</span>
                </div>
                <div style="display: flex; justify-content: space-between">
                  <span>wifi名{{ item.wifi_name }}</span>
                </div>
                <div style="display: flex; justify-content: space-between">
                  <span>wifi密码{{ item.wifi_password }}</span>
                </div>
              </div>
              <el-checkbox
                @change="smartDevicesChange(item)"
                style="padding: 10px"
                v-model="item.flag"
                >选中设备</el-checkbox
              >
            </el-card>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="create">创建设备绑定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      furnitureList: [],
      LockDevice: [],
      smartDevices: [],
      formEdit: {},
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      dialogVisible: false,
      bindingList: [],
      log: "",
    };
  },
  computed: {
    store_id() {
      return this.$store.state.user.regionalData.store_id;
    },
  },
  methods: {
    cancelSmartDevices(item) {
      //智能设备取消
      this.https("/device_operate_api", {
        device_id: item.device_id,
        operate_code: 0,
      }).then((res) => {
        this.$message.success("操作成功");
      });
    },
    confirmSmartDevices(item) {
      //智能设备确定
      this.https("/device_operate_api", {
        device_id: item.device_id,
        operate_code: 1,
      }).then((res) => {
        this.$message.success("操作成功");
      });
    },
    smartDevices(item) {
      //智能设备
      this.https("/device_operate_api", { device_id: item.device_id }).then(
        (res) => {
          this.$message.success(res.errmsg);
        }
      );
    },
    lockDeviceClick() {
      //锁设备
      let lock_id = "14416311";
      this.https("/up_lock_api", { lock_id: lock_id }).then((res) => {
        this.$message.error(res.errmsg);
      });
    },
    deviceDetection(item) {
      this.https("/device_test_api", {
        show_id: this.formEdit.show_id,
        store_id: this.store_id,
        binding_id: item.binding_id,
      }).then((res) => {
        this.log = res;
        this.$message.error(res.msg);
      });
    },
    create() {
      this.https("/create_binding_device_api", {
        ...this.formEdit,
        store_id: this.store_id,
      }).then((res) => {
        console.log(res, "res");
        if (res) {
          this.$message({
            type: "success", // success error warning
            message: "成功",
            duration: 2000,
          });
          this.dialogVisible = false;
        }
      });
    },
    furnitureChange(item) {
      if (item.flag) {
        this.formEdit.furniture_id = item.furniture_id;
        this.formEdit.furniture_position = "0-0";
        this.formEdit.furniture_overturn = 1;
        console.log(item);
      }
    },
    LockDeviceChange(item) {
      if (item.flag) {
        this.formEdit.binding_status = 2;
        this.formEdit.device_id = item.lock_id;
      }
      console.log(item);
    },
    smartDevicesChange(item) {
      if (item.flag) {
        this.formEdit.wifi_name = item.wifi_name;
        this.formEdit.wifi_password = item.wifi_password;
      }
      console.log(item);
    },
    dialogVisibleClick() {
      this.getList();
      this.dialogVisible = true;
    },
    getList() {
      this.https("/read_furniture_api", { store_id: this.store_id }).then(
        (result) => {
          let arr = result.map((item) => ({ ...item, flag: false }));
          this.furnitureList = arr;
        }
      );
      this.https("/read_lock_door_api", { store_id: this.store_id }).then(
        (result) => {
          let arr = result.map((item) => ({ ...item, flag: false }));
          this.LockDevice = arr;
        }
      );
      this.https("/read_device_api", { store_id: this.store_id }).then(
        (result) => {
          let arr = result.map((item) => ({ ...item, flag: false }));
          this.smartDevices = arr;
        }
      );
    },
    getBindingList() {
      this.https("/store_show_binding_api", {
        show_id: this.formEdit.show_id,
        store_id: this.store_id,
      }).then((res) => {
        this.bindingList = res;
      });
    },
  },
  mounted() {
    let { show_id } = this.$route.params;
    this.formEdit.show_id = show_id;
    console.log(this.$route.params.show_id, "@@@@@@@");
    // this.$route.query
    this.getBindingList();
  },
};
</script>

<style scoped>
.container_grid {
  /* background-color:red; */
  border: 1px solid #000;
  /* height: 20%; */
  padding: 1vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10vw, 1fr));
  grid-gap: 1vw;
}
.container_grid_item {
  /* width: 30%; */
  height: 30%;
}
</style>
